<template>
    <el-dialog
        title="设置连锁"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="400px"
        top="20px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                size="small"
                label-width="110px"
                @submit.native.prevent
            >
                <el-form-item label="商家：" prop="branchCompanyCode">
                    <el-select
                        class="items"
                        v-model="form.branchCompanyCode"
                        filterable
                        remote
                        clearable
                        reserve-keyword
                        :remote-method="remoteMethod"
                        :loading="listLoading"
                        placeholder="请输入商家"
                        size="small"
                    >
                        <el-option
                            v-for="item in companyList"
                            :key="item.companyCode"
                            :label="item.companyName"
                            :value="item.companyCode"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="验证类型：" prop="checkType">
                    <el-radio v-model="form.checkType" :label="1"
                        >账户验证</el-radio
                    >
                    <el-radio v-model="form.checkType" :label="2"
                        >手机验证</el-radio
                    >
                </el-form-item>
                <template v-if="form.checkType === 1">
                    <el-form-item label="商家密码：" prop="passWord">
                        <el-input
                            class="items"
                            v-model="form.passWord"
                            show-password
                            auto-complete="new-password"
                        ></el-input>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="商家验证码：" prop="verificationCode">
                        <div class="flex">
                            <el-input
                                style="width: 120px; margin-right: 10px"
                                v-model="form.verificationCode"
                            ></el-input>
                            <el-button
                                type="primary"
                                size="small"
                                :loading="sendLoading"
                                :disabled="time !== 60"
                                @click="sendCode"
                            >
                                {{
                                    time === 60
                                        ? '获取验证码'
                                        : time + '秒后再试'
                                }}</el-button
                            >
                        </div>
                    </el-form-item>
                </template>
            </el-form>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        currRow: Object
    },
    data () {
        return {
            time: 60,
            sendLoading: false,
            listLoading: false,
            props: {
                key: 'id',
                label: 'userName'
            },
            loading: false,
            showValue: false,
            form: {
                branchCompanyCode: '',
                checkType: 1,
                account: '',
                passWord: '',
                verificationCode: ''
            },
            rules: {
                branchCompanyCode: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ],
                account: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ],
                passWord: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ],
                verificationCode: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ]
            },
            companyList: []
        }
    },
    watch: {
        value (val) {
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                // this.getBranchCompanyList()
            }
            this.$emit('update:value', val)
        }
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        }
    },
    created () {
    },
    methods: {
        // 倒计时
        countDown () {
            if (this.time === 0) {
                this.time = 60
                return
            }
            setTimeout(() => {
                this.sendLoading = false
                this.time--
                this.countDown()
            }, 1000)
        },
        async sendCode () {
            if (!this.form.branchCompanyCode) {
                return this.$message.warning('请选择商家')
            }
            if (this.isSentCode) {
                return
            }
            this.sendLoading = true
            let res = await this.$http.post(this.$store.state.IP + '/smsManage/sendSmsCodeByCompanyCode', {
                data: {
                    companyCode: this.form.branchCompanyCode
                }
            })
            let response = res.data
            if (response.ret === '0') {
                console.log(res)
                this.companyList = response.data
                this.countDown()
            } else {
                this.sendLoading = false
            }
        },
        remoteMethod (query) {
            if (query !== '') {
                this.listLoading = true
                this.getBranchCompanyList(query)
            } else {
                this.companyList = []
            }
        },
        async getBranchCompanyList (query) {
            let res = await this.$http.post(this.$store.state.IP + '/headCompany/getBranchCompanyList', {
                companyName: query
            })
            let response = res.data
            if (response.ret === '0') {
                console.log(res)
                this.companyList = response.data
                this.listLoading = false
            }
        },
        // 清空数据
        clearData () {
            this.$refs.form.resetFields()
            this.companyList = []
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        save () {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    let res = await this.$http.post(this.$store.state.IP + '/headCompany/setBranchCompanyByCheck', {
                        ...this.form,
                        companyId: this.currRow.companyId,
                        companyCode: this.currRow.companyCode
                    })
                    let response = res.data
                    if (response.ret === '0') {
                        this.$message({
                            message: '设置成功',
                            type: 'success'
                        })
                        this.clearData()
                        this.$emit('getList')
                    } else {
                        this.loading = false
                    }
                }
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.flex
    display: flex

.items
    width: 220px

.checkboxWrap
    height: 300px
    overflow: auto

.checkItem
    width: 180px
    display: flex
    align-items: center
    margin-left: 0 !important
</style>